<template>
  <div style="margin: 20px;">
    <el-button type="primary"
               @click="tableColumnAdd">添加</el-button>

    <el-table :data="tableData"
              border
              style="width: 100%">
      <!-- <el-table-column label="姓名" prop="name">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
          ></el-input>
         
        </template>
      </el-table-column> -->
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <el-input v-if="scope.row.id == editId"
                    v-model="scope.row.name"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄"
                       prop="age">
        <template slot-scope="scope">
          <el-input v-model="scope.row.age"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editId: "",
      tableData: [{ name: "张三", age: 100 }]
    };
  },

  methods: {
    /**
     * 用来新增表格项
     */
    tableColumnAdd() {
      this.tableData.push({
        name: "",
        age: ""
      });
    }
  }
};
</script>
